<template>
    <div class="lefts">
        <div class="lefts-top">大学习后台管理系统</div>
        <div class="lefts-content">
            <el-menu
            :default-active='$route.path'
                class="el-menu-vertical-demo"
            :router='true'
                background-color="#001529"
                text-color="#fff"
                active-text-color="#1990ff">
                <el-menu-item index="/AdminIndex" v-if="role == 1">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu index="1" v-if="role == 1">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>管理员管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/AdminList">管理员列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/BannerList" v-if="role == 1">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">轮播图管理</span>
                </el-menu-item>
                <el-submenu index="3" v-if="role == 1">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>文章管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/TextList">文章列表</el-menu-item>
                        <el-menu-item index="/TextOptions">文章分类</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4" v-if="role == 1">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>矩阵管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/MatrixList">矩阵列表</el-menu-item>
                        <el-menu-item index="/MatrixOptions">矩阵分类</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/UserList">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">用户列表</span>
                </el-menu-item>
                <el-menu-item index="/UserRankList">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">学习排名</span>
                </el-menu-item>
                <el-submenu index="7" >
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>大学习管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/LearnList">学习列表</el-menu-item>
                        <el-menu-item index="/LearnPeriodList" v-if="role == 1">学习课程</el-menu-item>
                        <el-menu-item index="/LearnEntryList">报名列表</el-menu-item>
                        <el-menu-item index="/LearnEntryCompare">完成率统计</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>单位管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/CompanyList">单位列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                
                <el-menu-item index="/OpinionList" v-if="role == 1">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">反馈列表</span>
                </el-menu-item>
                <el-menu-item index="/NoticeList" v-if="role == 1">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">消息通知</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
 import { getToken, setToken, getName, setName} from '@/utils/auth'
    export default {
        
         data() {
            return {
               role:''
            }
        },
        
        created() {
            this.role = this.$store.state.user.roles[0] || getToken()
            console.log(this.role,4567);
            
		},
		methods:{
			
          
        }
    }
</script>

<style>
.lefts{
    height: 100%;
    background: #001529;
    position: fixed;
    left: 0;
    top:0;
    overflow: hidden;
}
.lefts-content{
    overflow-y: auto;
    
    height: calc(100% - 62px);
}
.lefts-content::-webkit-scrollbar { /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.lefts-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ccc;/*滚动条颜色*/
}

.lefts-content::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}
.el-menu{
    width: 190px;
}
.el-menu-item-group>ul{
    padding-left: 23px;
}
.lefts-top{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 24px;
    color: #fff;
}
.el-menu{
    border-right:none
}
</style>